<template>
  <transition name="el-zoom-in-bottom" appear>
  <div id="login_frame">
    <div id="login">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>登陆</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >我要注册</el-button
          >
        </div>
        <el-form ref="form" :model="user" :rules="rules" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="user.password"
              :show-password="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password_twice">
            <el-input
              type="password"
              :show-password="true"
              v-model="user.password_twice"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="user_login_vc"
              :disabled="login_button_disabled"
              :loading="login_button_selected"
              >登陆</el-button
            >
            <el-button>忘记密码</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</transition>
</template>

<script>
import { user_validator } from "../mixin/index";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "",
        password: "",
        password_twice: "",
      },
      login_button_selected: false,
    };
  },
  methods: {
    ...mapMutations('userAbout',['token_update']),
    user_login_vc() {
      this.$basicAxios(this.$ms.userLogin(this.user),(resp)=>{
        this.token_update(resp.data.data)
        this.$router.push({name:'content'})
      })
    },
  },
  mixins: [user_validator],
  computed: {
    login_button_disabled() {
      return !(
        /[a-z0-9_@\$]{4,}/.test(this.user.username) &&
        /[\S]{6,}/.test(this.user.password) &&
        this.user.password == this.user.password_twice
      );
    }
  },
  mounted(){
   
  }
};
</script>

<style lang="less" scoped>
#login {
  width: 50%;
  margin-left: 25%;
}
/deep/.el-card{
  width:100%
}
#login_frame {
  padding-top: 10%;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /** 
  background: #7f7fd5; 
  background: -webkit-linear-gradient(
    to right,
    #91eae4,
    #86a8e7,
    #7f7fd5
  ); 
  background: linear-gradient(
    to right,
    #91eae4,
    #86a8e7,
    #7f7fd5
    
  ); 
  */
  background: url("~@/assets/website_back.jpg") no-repeat;
  background-size:100% 100%
}
</style>